<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view>
		<view style="margin-top: 350rpx;" v-if="list.length == 0">
			<uv-empty mode="list"></uv-empty>
		</view>
		
		<view class="" v-for="(item,i) in list" :key="i">
			<view class="card">
				<view class="card_item flex justify-between">
					<view class="left">
						<view class="top">银行卡提现</view>
						<view class="bom">提现：{{formatDateTime(item.createTime)}}</view>
					</view>
					<view class="right">
						<view class="top">
							{{item.amount}}元
						</view>
						<view class="bom" v-if="item.status==0">
							未审核
						</view>
						<view class="bom" v-if="item.status==1">
							待到账
						</view>
						<view class="bom" v-if="item.status==2">
							审核拒绝
						</view>
						<view class="bom" v-if="item.status==3">
							已到账
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
import {
  ref
} from 'vue'
import {
	withdrawals
} from '@/api/merchant'
import { onLoad,onReachBottom} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('提现明细')
const list = ref([])
const page = ref(1)
const pageSize = ref(10)

onLoad(() => {
	getList()
})

onReachBottom(() => {
	page.value++
	getList()
})

const getList  = async() => {
	let res = await withdrawals({	
			shopId: merchartShop.value.id,
			pageNo: page.value,
		})
	if(res){
		list.value = [...list.value,...res]
	}
}

</script>

<style lang="scss">
	.card {
		background-color: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;

		.card_item {
			padding: 25rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EBEBEB;

			.left {

				.top {
					font-size: 26rpx;
					font-weight: 600;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.bom {
					font-size: 24rpx;
					color: #777777;
				}
			}

			.right {
				.top {
					font-size: 38rpx;
					font-weight: 600;
					color: #f56c6c;
					margin-bottom: 10rpx;
				}

				.bom {
					font-size: 24rpx;
					color: #777777;
					text-align: right;
				}
			}
		}
	}
</style>
